<template>
    <a-card>
        <div>
            <a-steps :current="current">
                <a-step v-for="item in steps" :key="item.title" :title="item.title" />
            </a-steps>
            <div class="steps-content">
                <!-- {{ steps[current].content }} -->
                <div v-if="current===0">

                    <!-- <div v-html="content"></div>
                    <quill-editor v-model:content="content" style="height: 300px;"></quill-editor>
                    <a-button @click="save">保存</a-button> -->
                    <div class="content-display" v-html="content" style="padding: 0 40px;"></div> 
                    <div style="text-align: right;padding-top: 20px;margin-bottom: 20px"><a-button  v-privilege="'announcements:save'" @click="()=>{visible=true}">编辑</a-button></div> 
                    <div class="editor-container" v-if="visible">  
                      <Toolbar :editor="editorRef" />  
                      <Editor  
                        v-model="content"  
                        :defaultConfig="editorConfig"  
                        @onCreated="handleCreated"  
                      />  
                    </div> 
                    <div style="text-align: right;padding-top: 20px;margin-bottom: 20px"><a-button @click="save" v-if="visible">保存</a-button></div>
                    
                </div>
                <!-- <div v-if="current===1">
                    <Form2/>
                </div> -->
                <div v-if="current===1">
                  <Form3 ref="f3Ref" v-model="modelValue" />
                </div>
            </div>
            <div class="steps-action">
                <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步</a-button>
                <a-button
                v-if="current == steps.length - 1"
                type="primary"
                @click="sub"
                >
                提交
                </a-button>
                <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</a-button>
            </div>
        </div>
    </a-card>
    
  </template>
  <script setup>
  import { defineComponent, ref,onBeforeUnmount, onMounted  } from 'vue';
  import Form2 from './components/form2.vue'
  import Form3 from './components/form3.vue'
  import {projectDailyReportApi} from "/@/api/business/oa/projectDailyReport.js";
  import { message } from 'ant-design-vue';
  // import { QuillEditor } from '@vueup/vue-quill'
  // import '@vueup/vue-quill/dist/vue-quill.snow.css'
  import '@wangeditor/editor/dist/css/style.css'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
  import { useRoute, useRouter } from 'vue-router';
  const router = useRouter();
  const route = useRoute();
 
  const visible = ref(false);
  const steps =ref([
    {
      title: '第一步',
      content: 'First-content',
    },
    // {
    //   title: '第二步',
    //   content: 'Second-content',
    // },
    {
      title: '第二步',
      content: 'Last-content',
    },
  ])
      const modelValue = ref({}) 
      const current = ref(0);
      const next = () => {
        current.value++;
      };
      const prev = () => {
        current.value--;
      };
      const f3Ref = ref()
      function sub(){
        let f3FromData = f3Ref.value.submit2();
        projectDailyReportApi.onSubmit(f3FromData).then(res=>{
          if(res.code==0){
            message.success('提交成功');
          }
          current.value = 0;
          f3Ref.value.onload();
        })
      }
    // 编辑器实例  
    const editorRef = ref(null);  
    // 编辑器内容  
    const content = ref('');  
    // 编辑器配置  
    const editorConfig = {  
      placeholder: '请输入内容...',  
      // 其他配置...  
    };  
      
    // 编辑器创建后的回调  
    const handleCreated = (editor) => {  
      editorRef.value = editor;  
    };  
      
    // 组件销毁时销毁编辑器  
    onBeforeUnmount(() => {  
      if (editorRef.value) {  
        editorRef.value.destroy();  
      }  
    }); 
    function save(){
      projectDailyReportApi.setHtml({note:content.value}).then(res=>{
        if(res.code==0){
            message.success('提交成功');
          }
      })
    }
    function getData(){
      projectDailyReportApi.getHtml().then(res=>{
        if(res.code==0){
          content.value = JSON.parse(res.data).note
        }
      })
    }
    onMounted(()=>{
      getData();
      let record = null
      if(route.query.record){
        record = JSON.parse(route.query.record)
      }
      
      if(record&&record.id){
        modelValue.value = record
      }
    })
  </script>
  <style scoped>
  .steps-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    background-color: #fafafa;
    min-height: 200px;
    padding-top: 10px;
  }
  
  .steps-action {
    margin-top: 24px;
    text-align: center
  }
  .editor-container {  
  /* 样式设置 */  
  
} 
  </style>